<template>
	<view class="guild">

		<view class="nav_bar nav"
			:style="`background: url(${$util.prefix('auth/store_auth_nav_bg.png')}) 0 0 no-repeat;`">
			<uni-nav-bar color="#333" left-icon="left" title="" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$native.backAction()">
				<view class="nav_tab flex_r_around">
					<u-tabs :list="tablist" @click="onTab" :scrollable="true" lineColor="#6B37E2" :inactiveStyle="{
							color: '#131313',
							fontWeight: '500',
							fontSize:'32rpx'
						}" :activeStyle="{
							color: '#131313',
							fontWeight: '500',
							fontSize:'32rpx'
						}">
					</u-tabs>
				</view>
			</uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<view class="block" v-if="type == 2">

			<view class="title">公会头像</view>

			<view class="avatar flex_r_around" @click="chooseImage">
				<image :src="info.logo" mode="aspectFill" class="have" v-if="info.logo"></image>
				<u-icon name="plus" :size="24" color="#666" v-else></u-icon>
			</view>

			<view class="title">基本信息</view>
			<view class="input_box flex_center">
				<text class="label">公会名称</text>
				<input type="text" v-model="info.guild_name" placeholder="请输入" placeholder-class="input-placeholder"
					:disabled="status == 1 || status == 2" />
			</view>
			<!-- <view class="input_box flex_center">
				<text class="label">公会规模</text>
				<input type="text" v-model="info.scale" placeholder="请输入" placeholder-class="input-placeholder"
					:disabled="status == 1 || status == 2" />
			</view> -->
			<view class="input_box flex_center">
				<text class="label">公会长姓名</text>
				<input type="text" v-model="info.name" placeholder="请输入" placeholder-class="input-placeholder"
					:disabled="true" />
			</view>
			<view class="input_box flex_center">
				<text class="label">公会长身份证号</text>
				<!-- status == 1 || status == 2 -->
				<input type="text" maxlength="18" v-model="info.id_card_num" placeholder="请输入"
					placeholder-class="input-placeholder" :disabled="true" @input="onKeyVinInput" />
			</view>
			<view class="input_box flex_center">
				<text class="label">联系方式</text>
				<input type="number" maxlength="11" v-model="info.mobile" placeholder="请输入"
					placeholder-class="input-placeholder" :disabled="status == 1 || status == 2" />
			</view>
			<view class="input_box flex_center">
				<text class="label">公会类型</text>
				<picker class="input" mode="selector" :range="typeList" @change="onType" range-key="name">
					<view class="input" :id="info.type == 0 ? 'no' : ''">
						{{info.type == 1 ? '语音厅' : info.type == 2 ? '个播房' : '请选择'}}
					</view>
				</picker>
			</view>

			<view class="remark" v-if="status == 3">（拒绝原因: {{remark || '暂无说明'}}）</view>

			<view class="btn_box">
				<view class="btn" @click="onsubmit" v-if="status == 0">下一步</view>
				<view class="btn" v-if="status == 1">审核中</view>
				<view class="btn" v-if="status == 2">已通过</view>
				<view class="btn" v-if="status == 3" @click="onsubmit">已拒绝</view>
			</view>
		</view>

		<view class="block" v-if="type == 1">
			<view class="content">

				<view class="search">
					<input type="text" placeholder="搜索公会名称/ID" placeholder-class="input-placeholder" v-model="key"
						confirm-type="search" @confirm="onSearch" />
				</view>

				<view class="item flex_center" v-for="(item,index) in list" :key="index">
					<view class="left flex_center">
						<image :src="item.logo" mode="aspectFill"></image>
						<view class="text">
							<view class="hidden">{{ item.guild_name || '' }}</view>
							<text class="hidden">公会ID:{{ item.id }}</text>
						</view>
					</view>

					<view class="right" @click="onApply(item)">
						申请加入
					</view>
				</view>

				<empty v-if="!list.length && total == 0"></empty>
				<u-loading-icon mode="circle" :show="total != 0 && total > list.length"
					color="rgb(107, 55, 226)"></u-loading-icon>

			</view>
		</view>

		<w-compress ref='wCompress' />

		<uni-popup ref="popup" type="center" border-radius="40rpx">
			<view class="popup">
				<view class="popup-text">
					确认加入{{ apply_item.guild_name }}公会
				</view>

				<view class="popup-btn flex_r_between">
					<button class="btn-item left" @click="onClosePopup">
						取消
					</button>

					<button class="btn-item right" @click="addMemberApply">
						确定
					</button>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue';
	import WCompress from '@/components/w-compress/w-compress.vue';
	import empty from '@/compentents/empty/empty.vue';
	export default {
		components: {
			navBar,
			WCompress,
			empty,
		},
		data() {
			return {
				type: 1,
				tablist: [{
						name: '加入公会',
						type: 1,
					},
					{
						name: '创建公会',
						type: 2,
					},
				],

				info: {
					// 公会头像
					logo: '',
					// 公会名称
					guild_name: '',
					// 规模
					scale: '',
					// 公会长姓名
					name: '',
					// 公会长身份证号
					id_card_num: '',
					// 联系方式
					mobile: '',

					// <!-- 个播 + 公会 -->
					// <!-- @张嘉轩   type：公会类型:1=语音厅,2=个播房 -->
					type: 0,

					circle_id: 0,

				},

				status: 0,
				remark: '',

				typeList: [{
						name: '语音厅',
						type: 1,
					},
					{
						name: '个播房',
						type: 2,
					}
				],

				key: '',

				list: [],
				page: 1,
				total: 1,

				apply_item: {
					guild_name: "",
					id: "0",
					logo: "",
					member_status: 0,
					status: 0,
					user_id: 0,
				},


			}
		},
		methods: {
			chooseImage() {
				if (this.status == 1 || this.status == 2) {
					return;
				}
				this.$native.authorize('photos');
				uni.chooseImage({
					count: 1,
					sizeType: 'compressed',
					success: (file) => {
						uni.navigateTo({
							url: `/pages/index/cropper?src=${file.tempFilePaths[0]}`,
							events: {
								getImage: (data) => {
									this.info.logo = data.src;
								}
							}
						});
						// this.$refs.wCompress.start(file.tempFilePaths[0], {
						// 	pixels: 2000000, // 最大分辨率，默认二百万
						// 	quality: 0.6, // 压缩质量，默认0.8
						// 	type: 'png', // 图片类型，默认jpg
						// 	// base64: false, // 是否返回base64，默认false，非H5有效
						// }).then(url => {
						// 	this.$upload(url, {
						// 		type: 'picture'
						// 	}).then(res => {
						// 		if (res.status == 2 || res.status == 1) {
						// 			this.info.logo = res.result.url
						// 		} else {
						// 			this.$util.msg(res.msg)
						// 		}
						// 	})
						// })

					},
					fail(err) {
						this.$util.msg(err)
					}
				})
			},

			onType(e) {
				this.info.type = this.typeList[e.detail.value].type;
			},

			onKeyVinInput(event) {
				var value = event.detail.value.toUpperCase()
				if (!value || value == " ") {
					return ''
				}
				// 数字和字母
				// const rule = /[\W]/g
				// 数字和大写字母
				const rule = /[^0-9A-Z]/g
				this.$nextTick(() => {
					this.info.id_card_num = value.replace(rule, '')
				})
			},

			onsubmit() {
				if (!(this.$u.test.idCard(this.info.id_card_num))) {
					this.$util.msg('请先完成实人认证(我的 - 认证)')
				}
				if (!(this.$u.test.mobile(this.info.mobile))) {
					return this.$util.msg('请输入正确的手机号');
				}
				this.$post('/guild/apply', this.info).then(res => {
					this.$util.msg(res.msg)
					this.getGuildApplyInfo()
				})
			},

			getGuildApplyInfo() {
				this.$get('/guild/getGuildApplyInfo', {
					circle_id: this.info.circle_id
				}, false).then(res => {
					this.status = res.data.status;
					if (res.data.status) {
						this.info.guild_name = res.data.guild_name;
						this.info.logo = res.data.logo;
						this.info.scale = res.data.scale;
						this.info.name = res.data.name;
						this.info.id_card_num = res.data.id_card_num;
						this.info.mobile = res.data.mobile;
						this.info.type = res.data.type;
						this.remark = res.data.admin_check;
					}
				});
			},

			// 获取认证信息回显
			getAuthInfo() {
				this.$post('/user/getProviderInfo', {
					circle_id: this.info.circle_id,
				}).then(res => {
					if (res.data.auth_status == 2) {
						this.info.name = res.data.name;
						this.info.id_card_num = res.data.id_card_num;
					} else {
						this.$util.msg('请先完成实人认证(我的 - 认证)')
					}
				});
			},

			onTab(e) {
				this.type = e.type;
			},

			onApply(item) {
				this.apply_item = item;
				this.$refs.popup.open();
			},

			onClosePopup() {
				this.$refs.popup.close();
			},

			getList() {
				this.$get('/guild.guildMemberApply/getApplyGuildList', {
					page: this.page,
					circle_id: this.info.circle_id,
					keys: this.key
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				});
			},

			refreshList() {
				this.list = [];
				this.total = 1;
				this.page = 1;
				this.getList();
			},

			onSearch() {
				this.refreshList();
			},

			addMemberApply() {
				this.$get('/guild.guildMemberApply/addMemberApply', {
					guild_id: this.apply_item.id,
					circle_id: this.info.circle_id,
				}).then(res => {
					this.$util.msg(res.msg);
					this.$refs.popup.close();
				});
			},

		},

		onLoad(option) {
			this.info.circle_id = option.circle_id || 0;
			this.getGuildApplyInfo();
			this.getAuthInfo();
			this.getList();
		},

		onReachBottom() {
			if (this.type == 1) {
				if (this.total > this.list.length) {
					this.page++;
					this.getList();
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #FFFFFF;
	}

	.nav {
		background-size: 100% !important;
		background: #FFF;

		// /deep/ .uni-navbar__header-btns-right {
		// 	width: 20rpx !important;
		// }

		.nav_tab {
			width: 100%;
		}
	}

	.guild {
		padding: 0 32rpx;
		background: #FFFFFF;
		min-height: 100vh;
		padding-bottom: 140rpx;
	}

	.title {
		margin-top: 32rpx;
		margin-bottom: 32rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #131313;
	}

	.avatar {
		width: 248rpx;
		height: 248rpx;
		background: #F8F8F8;
		border-radius: 16rpx;
		overflow: hidden;

		.have {
			width: 248rpx;
			height: 248rpx;
		}
	}

	.input_box {
		height: 100rpx;
		background: #F8F8F8;
		border-radius: 16rpx;
		padding: 0 32rpx 0;
		margin-bottom: 20rpx;

		.label {
			font-size: 32rpx;
			color: #131313;
		}

		input {
			flex: 1;
			text-align: right;
			font-size: 28rpx;
			color: #131313;
		}

		.input {
			flex: 1;
			text-align: right;
			font-size: 28rpx;
			color: #131313;
		}

		#no {
			color: #999;
		}
	}

	.btn_box {
		position: fixed;
		bottom: 30rpx;
		left: 0;
		right: 0;

		.btn {
			margin: 0 auto;
			width: 686rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 48rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}
	}

	.remark {
		font-size: 24rpx;
		padding: 20rpx 0;
		background: #FFF;
		color: red;
	}

	.content {
		overflow: hidden;

		.search {
			height: 80rpx;
			background: #F1F1F1;
			border-radius: 48rpx;
			padding: 0 32rpx;
			margin: 24rpx 0 20rpx;

			input {
				width: 100%;
				height: 100%;
				text-align: center;
				font-size: 28rpx;
				color: #333;
			}
		}

		.item {
			background: #F9F9F9;
			border-radius: 24rpx;
			padding: 16rpx 24rpx 16rpx 16rpx;
			overflow: hidden;
			margin: 0 0 20rpx 0;

			.left {
				flex: 1;
				overflow: hidden;

				image {
					width: 128rpx;
					height: 128rpx;
					border-radius: 24rpx;
					margin-right: 16rpx;
				}

				.text {
					flex: 1;
					overflow: hidden;

					view {
						font-weight: 500;
						font-size: 28rpx;
						color: #131313;
						line-height: 28rpx;
						margin-bottom: 12rpx;
					}

					text {
						font-size: 24rpx;
						color: #666666;
						line-height: 32rpx;
					}
				}
			}

			.right {
				width: 128rpx;
				height: 40rpx;
				background: #EEE6FF;
				border-radius: 20rpx;
				font-size: 24rpx;
				color: #6B37E2;
				line-height: 40rpx;
				text-align: center;
			}
		}
	}

	.popup {
		width: 560rpx;
		background: linear-gradient(180deg, #D5BBFF 0%, #E7DBFD 15%, #FFFFFF 30%);
		border-radius: 40rpx;
		padding: 86rpx 32rpx 40rpx;

		.popup-text {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
			text-align: center;
		}

		.popup-btn {
			margin-top: 60rpx;

			.btn-item {
				width: 240rpx;
				height: 80rpx;
				border-radius: 50rpx;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 80rpx;
			}

			.left {
				background: #EEE7FF;
				color: #6B37E2;
			}

			.right {
				background: #6B37E2;
				color: #FFF;
			}
		}
	}
</style>